<template>

	<view class="page">

		<!-- logo -->
		<view class="content">
			<image class="logo" src="/static/logo.png"></image>
			<view class="text-area">
				<text class="title">{{ title }}</text>
			</view>
		</view>

		<!-- 点击盒子之后的变化 -->
		<view class="box" hover-class="boxHover"></view>

		<!-- 区域滚动 -->
		<scroll-view scroll-x enable-flex class="scrollView">
			<view class="item">hello</view>
			<view class="item">hello</view>
			<view class="item">hello</view>
			<view class="item">hello</view>
			<view class="item">hello</view>
			<view class="item">hello</view>
			<view class="item">hello</view>
			<view class="item">hello</view>
			<view class="item">hello</view>
			<view class="item">hello</view>
			<view class="item">hello</view>
		</scroll-view>

		<!-- 轮播容器 -->
		<swiper indicator-dots autoplay circular interval="2000" indicator-color="rgba(255,255,255,0.3)"
			indicator-active-color="#F6C6CE" class="swiper">
			<swiper-item class="swiperItem">
				<image src="/static/logo.png" mode="aspectFill" class="image-item"></image>
			</swiper-item>
			<swiper-item class="swiperItem">
				<view>2</view>
			</swiper-item>
			<swiper-item class="swiperItem">
				<view>3</view>
			</swiper-item>
			<swiper-item class="swiperItem">
				<view>4</view>
			</swiper-item>
			<swiper-item class="swiperItem">
				<view>5</view>
			</swiper-item>
		</swiper>

		<!-- 跳转页面，无法跳转到 TabBar 页面 -->
		<text v-for="item in grids" :key="item.id" :data-item="item" @click="onGridSelect">跳转到{{item.title}}</text>
		<!-- <navigator url="/pages/type/index">跳转到type</navigator> -->

		<!-- 图片 -->
		<view class="image" @click="select">
			<image src="/static/logo.png" mode="aspectFill" class="image-item"></image>
		</view>

		<!-- 随机背景色 -->
		<view class="randomBgcolor" @click="onBgcolor" :style="{backgroundColor:color}"></view>

		<!-- 近期热梗 -->
		<view class="practice">

			<view class="title">
				近期热梗
			</view>

			<view class="out">
				<view class="list">
					<view class="row" v-for="(item,index) in lists" :key="item.id">
						<view class="text">{{index+1}}. {{item.title}}</view>
						<view class="close" @click="onDelete(item.id)">
							<icon type="clear" size="26" />
						</view>
					</view>
				</view>
				<view class="count">
					共{{lists.length}}条梗
				</view>
				<view class="comment">
					<input v-model="iptValue" @confirm="onPush" type="text" placeholder="请输入热梗..." />
					<button @click="onPush" :disabled="!iptValue.length" size="mini" type="primary">发布</button>
				</view>
			</view>

		</view>

		<!-- 数据缓存 -->
		<button @click="addStorage">add 数据缓存</button>
		<button @click="delStorage">del 数据缓存</button>
		<button @click="delAllStorage" type="warn">del all 数据缓存</button>

		<!-- 发送请求 -->
		<button @click="sendRequest">发送请求</button>

		<demo-images></demo-images>

	</view>

</template>


<script setup>
	import {
		ref
	} from 'vue';
	import {
		isEmpty
	} from "@/utils/utils.js";

	const title = ref("hello uni-app");

	// 
	const grids = ref([ //
		{
			"id": "1",
			"title": "login",
			"path": "/pages/pkgA/login/index",
			"imageUrl": "",
			"h5": "",
			"appId": "1234567890",
			"needLogin": false,
		}, {
			"id": "2",
			"title": "register",
			"path": "/pages/pkgA/register/index",
			"imageUrl": "",
			"h5": "",
			"appId": "1234567890",
			"needLogin": true,
		},
	]);
	const onGridSelect = (e) => {
		let item = e.currentTarget.dataset.item;
		console.log("~~~", item);

		// if (item.needLogin) {
		// 	console.log("~~~需要登录");
		// 	return;
		// }

		// 跳转小程序
		// if (!isEmpty(item.appId)) {
		// 	console.log("~~~跳转小程序");
		// 	uni.navigateToMiniProgram({
		// 		appId: item.appId,
		// 		path: item.path ?? '' // 打开的页面路径，如果为空则打开首页
		// 	})
		// 	return;
		// }

		// 跳转内部页面
		if (!isEmpty(item.path)) {
			uni.navigateTo({
				url: `${item.path}?name=demo&sex=1`
			})
		}

	};

	// 
	const itemList = ref(['初中', '高中', '大专', '本科', '研究生'])
	const select = () => {
		uni.showActionSheet({
			itemList: itemList.value,
			success: (res) => {
				console.log(`~~~选中了第 ${res.tapIndex + 1} 个按钮：${itemList.value[res.tapIndex]}`);
			}
		});
	};

	// 
	const color = ref("#fc359a");
	const onBgcolor = () => {
		color.value = "#" + String(Math.random()).substring(3, 9);
	};

	// 
	const lists = ref([{
			id: 111,
			title: "刚满18岁"
		},
		{
			id: 222,
			title: "我不吃牛肉"
		},
		{
			id: 333,
			title: "遥遥领先"
		},
		{
			id: 444,
			title: "哪里贵了"
		}
	]);

	// 通过 ID 查找索引，然后将其从数组中删除
	const onDelete = (id) => {
		uni.showModal({
			title: "删除热梗",
			content: "是否删除热梗？",
			success: (res) => {
				if (res.confirm) {
					const index = lists.value.findIndex(item => item.id === id);
					if (index !== -1) {
						lists.value.splice(index, 1);
						uni.showToast({
							title: "删除成功"
						})
					}
				} else if (res.cancel) {
					uni.showToast({
						title: "取消删除",
						icon: "none"
					});
				};
			}
		});
	};

	// 发布热梗
	const iptValue = ref("");
	const onPush = () => {
		lists.value.push({
			id: Date.now(),
			title: iptValue.value
		});
		uni.showToast({
			title: "发布成功"
		});
		iptValue.value = "";
	};

	// 
	const addStorage = () => {
		uni.setStorageSync("Storage_key1", ["hello", "word", "JavaScript"]);
		uni.setStorageSync("Storage_key2", ["hello", "JavaScript"]);
		setTimeout(() => {
			console.log("Storage_key =", uni.getStorageSync("Storage_key"));
		}, 1000);
	};

	// 
	const delStorage = () => {
		uni.removeStorageSync("Storage_key2");
	};

	// 
	const delAllStorage = () => {
		uni.clearStorageSync();
	};

	// 
	const sendRequest = () => {
		uni.showLoading({
			title: "加载中..."
		})
		uni.request({
			url: "https://jsonplaceholder.typicode.com/posts",
			data: {
				id: 5
			},
			method: "GET",
			success: res => {
				console.log(res);
				uni.hideLoading();
				uni.showToast({
					title: "加载成功",
					icon: "success"
				});
			},
			fail: res => {
				console.log(res);
				uni.hideLoading();
				uni.showToast({
					title: "加载失败",
					icon: "error"
				});
			}
		})
	};

	// 
	const getWallpaper = () => {
		
	}
</script>


<style lang="scss" scoped>
	@use "index.scss";
</style>